<template>
  <view class="writeInfo">
    <view class="basicForm">
      <uni-forms
        ref="writeInfoForm"
        :modelValue="formData"
        :rules="rules"
        :border="true"
      >
        <uni-forms-item label="姓名" name="name" label-width="80">
          <uni-easyinput
            type="text"
            v-model="formData.name"
            :inputBorder="false"
            placeholder="请输入姓名"
          />
        </uni-forms-item>
        <uni-forms-item label="性别" name="sex" label-width="80">
          <uni-data-checkbox
            v-model="sexValue"
            :localdata="sexRange"
            @change="handleSexValue"
            selectedColor="#88031E"
            selectedTextColor="#88031E"
          >
          </uni-data-checkbox>
        </uni-forms-item>

        <uni-forms-item label="年龄" name="age" label-width="80">
          <uni-easyinput
            type="number"
            v-model="formData.age"
            :inputBorder="false"
            placeholder="请输入年龄"
          />
        </uni-forms-item>
        <uni-forms-item label="身份证号" name="cardID" label-width="80">
          <uni-easyinput
            type="number"
            v-model="formData.cardID"
            :inputBorder="false"
            placeholder="请输入身份证号"
          />
        </uni-forms-item>

        <uni-forms-item
          label="银行卡号"
          name="BCID"
          label-width="80"
          v-if="this.role === 1"
        >
          <uni-easyinput
            type="number"
            v-model="formData.BCID"
            :inputBorder="false"
            placeholder="请输入银行卡号"
          />
        </uni-forms-item>
        <uni-forms-item
          label="开户行支行"
          name="BankName"
          label-width="80"
          border="true"
          v-if="this.role === 1"
        >
          <uni-easyinput
            type="text"
            v-model="formData.BankName"
            :inputBorder="false"
            placeholder="请输入开户行支行"
          />
        </uni-forms-item>
      </uni-forms>
    </view>
    <view class="confirmBtn">
      <button @click="submitForm" class="btn">完成</button>
    </view>
    <view>
      <u-modal
        v-model="show"
        @confirm="modalConfirm"
        ref="uModal"
        :async-close="true"
        content="提交成功，请等待审核"
        :show-title="false"
      ></u-modal>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      sexValue: undefined,
      role: -1,
      sexRange: [
        {
          value: 1,
          text: "男",
        },
        {
          value: 2,
          text: "女",
        },
      ],

      // 表单数据
      formData: {
        name: undefined,
        sex: undefined,
        age: undefined,
        cardID: undefined,
        BCID: undefined,
        BankName: undefined,
      },
      //   规则
      rules: {
        // 对name字段进行必填验证
        name: {
          rules: [
            {
              required: true,
              errorMessage: "*请填写完整信息",
            },
            {
              validateFunction: function (rule, value, data, callback) {
                let nameReg =
                  /^[\u4E00-\u9FA5A-Za-z\s]+(·[\u4E00-\u9FA5A-Za-z]+)*$/;

                if (!nameReg.test(value)) {
                  callback("姓名格式不正确，请重新输入");
                }
                return true;
              },
            },
          ],
        },
        sex: {
          rules: [
            {
              required: true,
              errorMessage: "*请填写完整信息",
            },
          ],
        },
        age: {
          rules: [
            {
              required: true,
              errorMessage: "*请填写完整信息",
            },
            {
              validateFunction: function (rule, value, data, callback) {
                let ageReg = /^((1[0-5])|[1-9])?\d$/;
                if (!ageReg.test(value)) {
                  callback("年龄格式不正确，请重新输入");
                }
                return true;
              },
            },
          ],
        },
        cardID: {
          rules: [
            {
              required: true,
              errorMessage: "*请填写完整信息",
            },
            {
              validateFunction: function (rule, value, data, callback) {
                let cardIDReg =
                  /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;

                if (!cardIDReg.test(value)) {
                  callback("身份证号格式不正确，请重新输入");
                }
                return true;
              },
            },
          ],
        },
        BCID: {
          rules: [
            {
              required: true,
              errorMessage: "*请填写完整信息",
            },
            {
              validateFunction: function (rule, value, data, callback) {
                let BCIDReg = /^([1-9]{1})(\d{14}|\d{18})$/;

                if (!BCIDReg.test(value)) {
                  callback("银行卡号格式不正确，请重新输入");
                }
                return true;
              },
            },
          ],
        },
        BankName: {
          rules: [
            {
              required: true,
              errorMessage: "*请填写完整信息",
            },
            {
              validateFunction: function (rule, value, data, callback) {
                let BankNameReg =
                  /^(([a-zA-Z+\.?\·?a-zA-Z+]{2,30}$)|([\u4e00-\u9fa5+\·?\u4e00-\u9fa5+]{2,30}$))/;

                if (!BankNameReg.test(value)) {
                  callback("开户行名格式不正确，请重新输入");
                }
                return true;
              },
            },
          ],
        },
      },
    };
  },
  onReady() {
    // 需要在onReady中设置规则
    this.$refs.writeInfoForm.setRules(this.rules);
  },
  onLoad() {
    let roleKey = uni.getStorageSync("role_key");
    this.role = roleKey;
    console.log(this.role);
  },
  methods: {
    handleSexValue(e) {
      this.sex = e.detail.value;
    },
    submitForm() {
      this.$refs.writeInfoForm
        .validate()
        .then((res) => {
          console.log("表单数据信息：", res);
          this.show = true;
        })
        .catch((err) => {
          console.log("表单错误信息：", err);
        });
    },
    modalConfirm() {
      setTimeout(() => {
        this.show = false;
        // 首次未审核，填完信息后直接返回login页面
        // uni.reLaunch({
        //   url: "../login/login",
        // });
        // 假设已审核成功
        uni.reLaunch({
          url: "../index/index",
        });
      }, 2000);
    },
  },
};
</script>

<style lang="less" scoped>
.writeInfo {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  .basicForm {
    padding: 1%;
    height: 80vh;
    width: 90vw;
    margin-top: 40rpx;
    display: flex;
    flex-direction: column;
  }
  .confirmBtn {
    width: 80vw;
    .btn {
      background-color: rgba(136, 3, 30, 1);
      color: white;
      font-size: 36rpx;
    }
  }
}
</style>
